<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
		  <el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<!-- 头部消息提示 -->
			  <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
			  <!-- 步骤条 -->
			  <el-steps :space="200" :active="activeIndex - 0-1" finish-status="success" align-center>
			    <el-step title="基本信息"></el-step>
			    <el-step title="商品参数"></el-step>
			    <el-step title="商品属性"></el-step>
				<el-step title="商品图片"></el-step>
				<el-step title="商品内容"></el-step>
				<el-step title="完成"></el-step>
			  </el-steps>
			  <!-- Form 表单区 -->
			  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
			  <!-- tab 标签 -->
			   <el-tabs :before-leave="beforeLeave" v-model="activeIndex" tab-position="left" @tab-click="tabClick" >
			      <el-tab-pane label="基本信息" name="1">
					   <el-form-item label="商品名称" prop="goods_name">
					      <el-input v-model="addForm.goods_name"></el-input>
					    </el-form-item>
						<el-form-item label="商品价格" prop="goods_price">
						   <el-input v-model="addForm.goods_price" type="number"></el-input>
						 </el-form-item>
						<el-form-item label="商品重量" prop="goods_weight">
						   <el-input v-model="addForm.goods_weight"></el-input>
						 </el-form-item>
						<el-form-item label="商品数量" prop="goods_number">
						  <el-input v-model="addForm.goods_number"></el-input>
						</el-form-item>
						<el-form-item label="商品分类" prop="goods_cat">
						  <el-cascader
						    style="width: 40%;"
						    :clearable="true"
						    :filterable="true"
						    expand-trigger="hover"
						    v-model="addForm.goods_cat"
						    :options="paramsList"
						    @change="handleChange"
						   :props="paramsProps"
						  	></el-cascader>
						</el-form-item>
						  
				  </el-tab-pane>
			      <el-tab-pane label="商品参数" name="2">
					  <el-form-item :label="item.attr_name+' : '" v-for="item in manyTabData" :key="item.attr_id" style="margin-left: -20px;">
						  <!-- 多选框组 -->
						  <el-checkbox-group v-model="item.attr_vals">
						      <el-checkbox :label="items" v-for="(items,index) in item.attr_vals" :key="index" @change="change" border></el-checkbox>
						    </el-checkbox-group>
					  </el-form-item>
				  </el-tab-pane>
			      <el-tab-pane label="商品属性" name="3">
					  <el-form-item :label="item.attr_name+' : '" v-for="item in onlyTabData" :key="item.attr_id" style="margin-left: -20px;">
							<el-input v-model="item.attr_vals" disabled></el-input>
					  </el-form-item>
				  </el-tab-pane>
			      <el-tab-pane label="商品图片" name="4">
					  <!-- action 图片上传地址;on-preview 预览的事件;on-remove 点击图片边 x 号触发; list-type 图片呈现方式 -->
					  <el-upload
					    :action="uploadURL"
					    :on-preview="handlePreview"
					    :on-remove="handleRemove"
						:headers="headersObj"
						:on-success="handlSuccess"
					    list-type="picture">
					    <el-button size="small" type="primary">点击上传</el-button>
					  </el-upload>
				  </el-tab-pane>
				  <el-tab-pane label="商品内容" name="5">
					  <!-- 富文本 -->
					  <quill-editor v-model="addForm.goods_introduce"></quill-editor>
					  <!-- 添加商品按钮 -->
					  <el-button class="addButton" type="primary" @click="addButton">添加商品</el-button>
				  </el-tab-pane>
			    </el-tabs>
				</el-form>
		</el-card>
		<!-- 展示图片对话框 -->
		<el-dialog title="展示图片" :visible.sync="modifyFormVisible">
		  <el-form  label-width="80px" class="demo-ruleForm">
			  <el-image :src="imageSrc"></el-image>
		    </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="modifyFormVisible = false">关 闭</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				checkList:[],			//多选框组数据
				activeIndex:'1',		//步骤条激活步骤
				cateList:[],			//所有商品分类数据
				manyTabData:[],			//动态参数数据
				onlyTabData:[],			//静态属性数据
				attrVals:[],			//商品属性输入框数据
				addForm:{			//添加商品的表单数据对象
					goods_name:'',		//名称
					goods_price:'',		//价格
					goods_weight:'',	//重量
					goods_number:'',	//数量
					goods_cat:[],		//商品所属分类数组
					pics:[],				//上传图片返回地址(对象)
					goods_introduce:'',		//商品介绍
					atts:[],				//商品的参数(动态参数,静态属性)
				},
				imageSrc:'',			//展示图片地址	
				selector:[],		//选择器数据结果
				paramsList:[],			//选择商品分类选择器数据列表
				paramsProps:{			//指定级联选择器的配置对象
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				headersObj:{			//图片上传组件的 headers 请求头对象
					Authorization:window.sessionStorage.getItem('token')      //为图片上传提供 token 验证
				},				
				uploadURL:'http://127.0.0.1:8888/api/private/v1/upload',		//图片上传地址
				modifyFormVisible:false,				//展示图片对话框默认隐藏
				addFormRules:{		//表单验证
				  goods_name: [
					{ required: true, message: '请输入商品名称', trigger: 'blur' },
				  ],
				  goods_price: [
				  	{ required: true, message: '请输入商品价格', trigger: 'blur' },
				  ],
				  goods_weight: [
				  	{ required: true, message: '请输入商品重量', trigger: 'blur' },
				  ],
				  goods_number: [
				  	{ required: true, message: '请输入商品数量', trigger: 'blur' },
				  ],
				  goods_cat: [
				  	{ required: true, message: '请选择商品分类', trigger: 'blur' },
				  ],
				},
			}
		},
		methods:{
			getCateList(){		//获取所有商品分类数据
				this.$axios.get('categories').then(data => {
					console.log(data.data.data)
					this.paramsList = data.data.data
				})
			},
			handleChange(value){			//监听选择项发生变化
				console.log(this.addForm.goods_cat)
				if(this.addForm.goods_cat.length !== 3){
					this.addForm.goods_cat = []
					this.$message({message: '请选择三级分类商品', type: 'error'});
				}else{
						// this.getCateList()
				}
			},
			handlePreview(file){			//图片预览的事件
				console.log(file)
				this.imageSrc = file.response.data.url
				this.modifyFormVisible = true
			},
			handleRemove(file){				//点击图片边 x 号触发
				console.log(file)
				console.log(file.response.data.tmp_path)
				//从 pics 数组当中找到这图片的索引值使用 findIndex 
				var index = this.addForm.pics.findIndex(res => res.pic === file.response.data.tmp_path)
				this.addForm.pics.splice(index,1)
				console.log(this.addForm.pics)
			},
			handlSuccess(response){				//监听图片上传成功
				console.log(response)
				const picInfo = {pic:response.data.tmp_path}
				this.addForm.pics.push(picInfo)
				console.log(this.addForm.pics)
			},
			beforeLeave(activeName,oldActiveName){			//标签页发生变化时触发
				console.log(oldActiveName)		//即将离开标签页
				console.log(activeName)		//即将进入标签页
				if(oldActiveName === '1' && this.addForm.goods_cat.length !== 3){
					this.$message({message: '请选择商品分类', type: 'error'});
					return false
				}
			},
			tabClick(){		//tab 标签页被选中时触发
				console.log(this.activeIndex)
				if(this.activeIndex === '2'){		//获取动态参数
					this.$axios.get('categories/'+this.addForm.goods_cat[2]+'/attributes',{params:{sel:'many'}}).then(data => {
						console.log(data.data)
						//将字符串转为数组 并且循环    再进判断如果字符串为空就返回一个空数组
						data.data.data.forEach(item => {item.attr_vals =  item.attr_vals.split(',')})
						this.manyTabData = data.data.data
					})
				}else if(this.activeIndex === '3'){		//获取静态属性
					this.$axios.get('categories/'+this.addForm.goods_cat[2]+'/attributes',{params:{sel:'only'}}).then(data => {
						console.log(data.data)
						//将字符串转为数组 并且循环    再进判断如果字符串为空就返回一个空数组
						data.data.data.forEach(item => {item.attr_vals =  item.attr_vals.split(',')})
						this.onlyTabData = data.data.data
					})
				}
			},
			change(name){		//点击复选框时触发
				console.log(name)
				console.log(this.checkList)
			},
			addButton(){					//添加商品按钮
				this.$refs.addFormRef.validate(valid => {		//验证数据是否合法
					if(valid == true){
						this.addForm.goods_cat = this.addForm.goods_cat.join(',')
						this.checkList.join(',')
						this.manyTabData.forEach(item => {
							const newInfo = {
								attr_id:item.attr_id,
								attr_value:item.attr_vals.join(',')
							}
							
							this.addForm.atts.push(newInfo)
						})
						this.onlyTabData.forEach(item => {
							const newInfo = {
								attr_id:item.attr_id,
								attr_value:item.attr_vals.join(',')
							}
							this.addForm.atts.push(newInfo)
						})
						console.log(this.addForm.atts)
						// this.addForm.atts = this.addForm.atts
						console.log(this.addForm)
						this.$axios.post('goods',this.addForm).then(data => {
							if(data.data.meta.status == 400){
								this.$message({message: data.data.meta.msg, type: 'success'});
							}
							this.$message({message: '添加商品成功', type: 'success'});
						})
						this.$router.push('/goods')
					}else{
						this.$message({message: '请填写必要表单项', type: 'error'});
					}
				})
			}
		},
		created(){
			this.getCateList()
		}
	}
</script>

<style  lnag="scss" scoped>
	.el-card{
	}
	.el-steps{
		margin-top: 20px;
	}
	.el-tabs{
		margin-top: 25px;
		height: 100%;
	}
	.addButton{
		margin-top: 15px;
	}
</style>
